<template>
  <view class="repairer-container">
    <!-- 公司信息列表 -->
    <view class="info-list">
 
      <text class="info-title">{{ companyInfo.name }}</text>
        
      <view class="info-item">
        <text class="info-label">省市：</text>
        <text class="info-value">{{ companyInfo.province }} {{ companyInfo.city }} {{ companyInfo.country }}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">详细地址：</text>
        <text class="info-value">{{ companyInfo.address }}</text>
      </view>
    </view>

    <!-- 资质认证列表 -->
    <view class="qualification-list" v-if="qualificationList.length > 0">
      <text class="section-title-rz">资质认证</text>
      <view class="qualification-item" v-for="(item, index) in qualificationList" :key="index">
        <image class="check-icon" src="/static/my/my-zz.png" mode="aspectFit"></image>
        <text class="qualification-text">{{ item }}</text>
      </view>
    </view>

    <!-- 证明材料 -->
    <view class="materials">
      <text class="section-title-zl">证明材料</text>
      <view class="materials-grid">
		<view class="materials-preview" v-for="(item, index)  in materialImages" :key="index">
			<image :src="item" mode="aspectFill" class="material-image" @click="previewImage(index)"
			></image>
		</view>
      </view>
    </view>

    <!-- 站长显示修改按钮 -->
	 <view  v-if="userInfo?.type === USER_TYPES.GAS">
		 <view class="button-section" @click="handleEdit" v-if = "userInfo.member.role == MEMBER_ROLES.DIRECTOR">
		   <button class="gvr-yellow-button edit-btn">编辑公司信息</button>
		 </view>
		 <!-- 员工显示加入状态 -->
		 <view class="join" v-else>
		 		<view class="join-status" v-if="userInfo?.member.status === EXAMINE_STATUS.VERIFYING">
		 		  <image class="status-icon" src="/static/my/review-under.png" mode="aspectFit"></image>
		 		  <text class="status-text">审核中</text>
		 		</view>
		 		
		 		<view class="join-status" v-if="userInfo?.member.status === EXAMINE_STATUS.ENABLED">
		 		  <image class="status-icon" src="/static/my/review-success.png" mode="aspectFit"></image>
		 		  <text class="status-text">已通过</text>
		 		</view>
		 		
		 		<view class="join-status" v-if="userInfo?.member.status === EXAMINE_STATUS.REFUSED">
		 		  <image class="status-icon" src="/static/my/review-rejected.png" mode="aspectFit"></image>
		 		  <text class="status-text">已驳回</text>
		 		</view>
		 	</view>
	 </view>
	 <view  v-else >
		<view class="join" v-if = "userInfo.member.role == MEMBER_ROLES.DIRECTOR ">
			<view class="join-status" v-if="companyInfo.status === EXAMINE_STATUS.VERIFYING">
			  <image class="status-icon" src="/static/my/review-under.png" mode="aspectFit"></image>
			  <text class="status-text">审核中</text>
			</view>
			 <view class="button-section" @click="handleEdit" v-if="companyInfo?.status === EXAMINE_STATUS.ENABLED">
				<button class="gvr-yellow-button edit-btn">编辑公司信息</button>
			 </view>
			 <view class="join-status" v-if="companyInfo.status === EXAMINE_STATUS.REFUSED">
			   <image class="status-icon" src="/static/my/review-rejected.png" mode="aspectFit"></image>
			   <text class="status-text">已驳回</text>
			 </view>
		 </view>
		 <!-- 员工显示加入状态 -->
		 <view class="join" v-else>
		 		<view class="join-status" v-if="userInfo?.member.status === EXAMINE_STATUS.VERIFYING">
		 		  <image class="status-icon" src="/static/my/review-under.png" mode="aspectFit"></image>
		 		  <text class="status-text">审核中</text>
		 		</view>
		 		
		 		<view class="join-status" v-if="userInfo?.member.status === EXAMINE_STATUS.ENABLED">
		 		  <image class="status-icon" src="/static/my/review-success.png" mode="aspectFit"></image>
		 		  <text class="status-text">已通过</text>
		 		</view>
		 		
		 		<view class="join-status" v-if="userInfo?.member.status === EXAMINE_STATUS.REFUSED">
		 		  <image class="status-icon" src="/static/my/review-rejected.png" mode="aspectFit"></image>
		 		  <text class="status-text">已驳回</text>
		 		</view>
		 	</view>
	 </view>
	
	 

   
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { userStore } from '@/utils/userStore.js'
import { orgApi,MEMBER_ROLES,EXAMINE_STATUS,USER_TYPES} from '@/service/api.js'
import { RouterMethods } from '../../utils/router'

const userInfo = ref(null)
const companyInfo = ref({})

// 资质认证映射关系
const QUALIFICATION_MAP = {
  main_cert_1: '防爆电气设备安装、维修服务资格证书',
  main_cert_2: 'CMA检测资质',
  main_cert_3: '管理体系认证证书',
  main_cert_4: '石油公司入围服务机构'
}
// 定义固定的资质列表顺序
const QUALIFICATION_ORDER = [
  'main_cert_1',
  'main_cert_2',
  'main_cert_3',
  'main_cert_4'
]
// 资质认证列表
const qualificationList = ref([])

// 证明材料图片列表
const materialImages = ref([])

// 获取公司详情
const fetchCompanyInfo = async () => {
  try {
    userInfo.value = userStore.getUserInfo()
    if (userInfo.value.member.orgId != undefined) {
      const response = await orgApi.getOrgDetail(userInfo.value.member.orgId)
	  if (response.code === undefined) {
	    companyInfo.value = response
	    // 处理资质认证列表
		if (response.orgInfo) {
		  qualificationList.value = QUALIFICATION_ORDER
			  .filter(key => response.orgInfo[key] === "1")  // 只保留值为"1"的项
			  .map(key => QUALIFICATION_MAP[key])  // 转换为对应的资质名称
	    } else {
		    qualificationList.value = []
	    }
		  
		  // 处理图片数据
		if (response.images) {
		  // 获取所有图片URL并转换为数组
		   materialImages.value = Object.values(response.images)
		  // materialImages.value = [...Object.values(response.images),...Object.values(response.images),
		  // ...Object.values(response.images),...Object.values(response.images)]
		  
		} else {
		  materialImages.value = []
		}
	  } else {
	   throw new Error(response.msg || '获取公司信息失败')
	  }
    }
  } catch (error) {
    console.error('获取公司信息失败:', error)
    uni.showToast({
      title: '获取公司信息失败',
      icon: 'none'
    })
  }
}

// 预览图片
const previewImage = (index) => {
  uni.previewImage({
    urls: materialImages.value,
    current: materialImages.value[index]
  })
}

// 处理编辑按钮点击
const handleEdit = () => {
	
  const encodedData = encodeURIComponent(JSON.stringify(companyInfo.value))
  RouterMethods.toRepairerCreateOrg('edit',encodedData)
}

onMounted(() => {
  fetchCompanyInfo()
})
</script>

<style>
.repairer-container {
  min-height: 100vh;
  padding: 0 56rpx;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.info-list {
 margin-top: 80rpx;
 background: #FFFFFF;
 display: flex;
 flex-direction: column;
}
.info-title {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
  width: 100%;
  margin-bottom: 32rpx;
}
.info-item {
/*  background-color: aqua; */
  border-bottom: 2rpx solid #001E32;
  margin-top: 0rpx;
  padding-bottom: 13rpx;
}
.info-item:last-child {
  margin-top: 41rpx;
  padding-bottom: 13rpx;
}


.info-title {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.info-label {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
  
}

.info-value {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.section-title-rz {
 font-family: PingFangSC-Medium;
 font-size: 32rpx;
 color: #000000;
 letter-spacing: 0;
 font-weight: 500;
 margin-top: 50rpx;
 margin-bottom: 32rpx;
}

.qualification-list {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}

.qualification-item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.qualification-item:last-child {
  margin-bottom: 0;
}

.check-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 18rpx;
}

.qualification-text {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.materials {
  display: flex;
  flex-direction: column;
  margin-bottom: 192rpx;
}
.section-title-zl {
 font-family: PingFangSC-Medium;
 font-size: 32rpx;
 color: #000000;
 letter-spacing: 0;
 font-weight: 500;
 margin-top: 50rpx;
}
.materials-grid {
  /* background-color: aquamarine; */
  margin-top: 38rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  padding: 5rpx;
}
.materials-preview {
  width: 190rpx;
  height: 190rpx;
  position: relative;
  border-radius: 4rpx;
  overflow: hidden;
  border: 2rpx solid #001E32;
}

.material-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 底部按钮区域样式修改 */
.button-section {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #FFFFFF;
  z-index: 20
}

.edit-btn {
  border-radius: 0;
}

/* 加入状态样式 */
.join-status {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: calc(40rpx + env(safe-area-inset-bottom));
  height: 60rpx;
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 6rpx;
}

.status-text {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}
</style>